<template>
  <section class="border-top pt-115 pb-80" id='active'>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-8 col-md-12">
          <!-- section title -->
          <div class="section-title text-center">
            <h2>Max.快讯</h2>
            <p>这里记录了Max.工作室近期的活动与会议</p>
          </div>
          <!-- End of section title -->
        </div>
      </div>
      <div class="row">
        <div class="col-lg-4 col-md-4"
             v-for="(item,index) in dataList"
             :key="index"
             v-if="index<3">
          <!-- single actives inner -->
          <div class="single-blog-inner">
            <!-- actives image -->
            <div class="post-image">
              <nuxt-link :to="{name:'active-details',params:{id:item.id}}">
                <img :src="item.img" alt="">
              </nuxt-link>
            </div>
            <div class="post-content">
              <div class="post-details">
                <div class="post-title">
                  <h3>
                    <nuxt-link :to="{name:'active-details',params:{id:item.id}}">{{ item.title }}</nuxt-link>
                  </h3>
                  <p class="content-honour">{{ item.atext }}</p>
                </div>
                <nuxt-link class='blog-btn' to="/active">了解更多</nuxt-link>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>
</template>

<script>
import {Api} from "@/request/Api";

export default {
  name: "ActiveHome",
  data() {
    return {
      //其他活动数据
      dataList: [],
      currentPage: 1,
      pageSize: 6,
    }
  },
  created() {
    this.getArticleList()
  },
  methods: {
    async getArticleList() {
      let data = {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      const result = await Api.getArticleList(data)
      console.log(result)
      if (result.code === 200) {
        //获取对应页数的内容
        this.dataList = result.data.articleInfo.records
        console.log(this.dataList)
      }
      this.getSimpleText()
    },
    getSimpleText() {
      this.dataList.forEach(item => {
        //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
        item.atext = item.atext.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, '').replace(/<[^>]+?>/g, '').replace(/\s+/g, '').replace(/ /g, '').replace(/>/g, '').replace(/&nbsp;/g, '');
      })
      console.log(this.dataList)
    }
  }
}
</script>

<style scoped>
h3 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.post-image img {
  height: 400px;
  object-fit: cover;
}

.content-honour {
  height: 85px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
</style>
